<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>课堂点名系统（完整版）</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            height: 100vh;
            background: linear-gradient(rgba(0,0,0,0.7), 
                rgba(0,0,0,0.7)), 
                url('https://img.zcool.cn/community/01a8e55d3bcdb5a8012187f4b9c6e7.jpg') center/cover;
            color: #fff;
            font-family: 'Arial', '微软雅黑';
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .container {
            background: rgba(255,255,255,0.1);
            padding: 20px;
            border-radius: 15px;
            backdrop-filter: blur(5px);
            max-width: 800px;
            width: 90%;
        }

        h1 {
            text-align: center;
            color: #00ff9d;
            text-shadow: 0 0 10px #00ff9d;
            margin: 20px 0;
        }

        #nameList {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 10px;
            margin: 20px 0;
            padding: 10px;
            background: rgba(0,0,0,0.3);
            border-radius: 10px;
        }

        .name-item {
            padding: 8px;
            text-align: center;
            border: 1px solid #00ff9d;
            border-radius: 5px;
            transition: all 0.3s;
        }

        .highlight {
            background: #00ff9d !important;
            color: #000;
            transform: scale(1.1);
            box-shadow: 0 0 15px #00ff9d;
        }

        .controls {
            display: flex;
            gap: 10px;
            margin: 15px 0;
            align-items: center;
            flex-wrap: wrap;
        }

        button {
            padding: 10px 25px;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: 0.3s;
            font-weight: bold;
        }

        #startBtn, #pauseBtn {
            background: #00ff9d;
            color: #000;
        }

        .upload-btn {
            position: relative;
            overflow: hidden;
            background: #ff9900 !important;
        }

        .save-btn {
            background: #9c27b0 !important;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            z-index: 999;
        }

        .modal-content {
            position: relative;
            top: 30%;
            margin: auto;
            padding: 20px;
            width: 300px;
            background: rgba(255,255,255,0.15);
            border-radius: 10px;
            backdrop-filter: blur(10px);
        }

        .import-option {
            padding: 15px;
            margin: 10px 0;
            background: rgba(0, 255, 157, 0.1);
            border: 1px solid #00ff9d;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.3s;
            text-align: center;
        }

        .import-option:hover {
            background: rgba(0, 255, 157, 0.2);
        }

        .class-action-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: none;
            z-index: 1000;
        }

        .class-action-content {
            position: relative;
            top: 35%;
            width: 300px;
            margin: 0 auto;
            padding: 20px;
            background: rgba(255,255,255,0.15);
            border-radius: 10px;
            backdrop-filter: blur(10px);
        }

        .class-action-btn {
            padding: 15px;
            margin: 10px 0;
            background: rgba(0, 255, 157, 0.1);
            border: 1px solid #00ff9d;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.3s;
        }

        #speed {
            width: 200px;
            margin-left: 20px;
        }

        select {
            padding: 8px;
            border-radius: 5px;
            background: rgba(255,255,255,0.1);
            color: white;
            border: 1px solid #00ff9d;
        }

        option {
            color: #000;
        }

        .upload-tips {
            color: #00ff9d;
            font-size: 12px;
            margin: 5px 0;
            padding: 8px;
            border: 1px solid rgba(0, 255, 157, 0.2);
            border-radius: 4px;
            background: rgba(0,255,157,0.1);
            max-width: 300px;
            text-align: center;
        }

        .author-info {
            text-align: center;
            margin-top: 20px;
            font-size: 12px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>课堂点名系统</h1>
        <div class="controls">
            <select id="classSelector"></select>
            <button class="upload-btn" id="importBtn">
                导入名单
                <input type="file" id="fileInput" hidden accept=".txt">
            </button>
            <button id="saveDataBtn" class="save-btn">保存数据</button>
            <button id="manageClassBtn" class="save-btn">管理班级</button>
        </div>
        <div class="upload-tips" id="uploadTips">数据自动保存至本地</div>
        <div id="nameList"></div>
        <div class="controls">
            <button id="startBtn">开始</button>
            <button id="pauseBtn">暂停</button>
            <input type="range" id="speed" min="1" max="100" value="50">
        </div>
    </div>

    <div id="importModal" class="modal">
        <div class="modal-content">
            <div class="import-option" id="uploadOption">📁 上传文件导入</div>
            <div class="import-option" id="textOption">⌨️ 输入文本导入</div>
        </div>
    </div>

    <div id="classActionModal" class="class-action-modal">
        <div class="class-action-content">
            <div class="class-action-btn" id="overwriteClass">覆盖当前班级</div>
            <div class="class-action-btn" id="createNewClass">创建新班级</div>
        </div>
    </div>

    <div id="classManageModal" class="class-action-modal">
        <div class="class-action-content">
            <div class="class-action-btn" id="renameClass">重命名班级</div>
            <div class="class-action-btn" id="deleteClass">删除班级</div>
        </div>
    </div>

    <text class="author-info">由人工智能大模型协助完成</text>

    <script>
        // 数据存储配置
        const STORAGE_KEY = "classRollSystemData";
        const DATA_VERSION = "1.1";

        // 初始化数据
        let students = {};
        let timer = null;
        let currentHighlight = null;
        let speed = 100;
        const synth = window.speechSynthesis;
        let pendingNames = [];

        // 数据存储功能
        function saveData() {
            try {
                const storageData = {
                    version: DATA_VERSION,
                    lastUpdate: new Date().toISOString(),
                    students,
                    stats: {
                        classCount: Object.keys(students).length,
                        totalStudents: Object.values(students).reduce((sum, cls) => sum + cls.students.length, 0)
                    }
                };

                localStorage.setItem(STORAGE_KEY, JSON.stringify(storageData));
                document.getElementById('uploadTips').innerHTML = `✅ 数据已保存（${new Date().toLocaleTimeString()}）`;
            } catch (e) {
                console.error("保存失败:", e);
                document.getElementById('uploadTips').innerHTML = `❌ 保存失败：${e.message}`;
            }
        }

        function loadData() {
            try {
                const data = localStorage.getItem(STORAGE_KEY);
                if (data) {
                    const parsedData = JSON.parse(data);
                    if (parsedData.version === DATA_VERSION) {
                        return parsedData;
                    }
                }
                return null;
            } catch (e) {
                console.error("数据读取失败:", e);
                return null;
            }
        }

        // 初始化班级列表
        function initClassSelector() {
            const selector = document.getElementById('classSelector');
            selector.innerHTML = Object.entries(students).map(([id, cls]) => 
                `<option value="${id}">${cls.name}</option>`
            ).join('');
        }

        // 初始化学生名单
        function initNames() {
            const classKey = document.getElementById('classSelector').value;
            const nameList = document.getElementById('nameList');
            nameList.innerHTML = students[classKey].students.map(name => 
                `<div class="name-item">${name}</div>`
            ).join('');
        }

        // 事件监听
        document.getElementById('saveDataBtn').addEventListener('click', function() {
            if(saveData()) {
                document.getElementById('uploadTips').innerHTML = 
                    `✅ 数据已手动保存（${new Date().toLocaleTimeString()}）`;
            }
        });

        document.getElementById('importBtn').addEventListener('click', () => {
            document.getElementById('importModal').style.display = 'block';
        });

        document.getElementById('uploadOption').addEventListener('click', () => {
            document.getElementById('fileInput').click();
            document.getElementById('importModal').style.display = 'none';
        });

        document.getElementById('textOption').addEventListener('click', () => {
            const input = prompt('请输入学生姓名，用空格分隔：');
            if (input) {
                pendingNames = input.split(' ')
                    .map(name => name.trim())
                    .filter(name => name.length > 0);
                
                if (pendingNames.length > 0) {
                    document.getElementById('classActionModal').style.display = 'block';
                }
            }
            document.getElementById('importModal').style.display = 'none';
        });

        document.getElementById('fileInput').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.readAsText(file, 'UTF-8');

            reader.onload = function(e) {
                pendingNames = e.target.result.split(/[\r\n]+/)
                    .map(name => name.trim())
                    .filter(name => name.length > 0);

                if (pendingNames.length > 0) {
                    document.getElementById('classActionModal').style.display = 'block';
                }
            };
        });

        document.getElementById('overwriteClass').addEventListener('click', function() {
            const currentClass = document.getElementById('classSelector').value;
            students[currentClass].students = pendingNames;
            initNames();
            saveData();
            document.getElementById('classActionModal').style.display = 'none';
        });

        document.getElementById('createNewClass').addEventListener('click', function() {
            const className = prompt('请输入新班级名称：') || '未命名班级';
            const classId = 'class' + Date.now();
            
            students[classId] = {
                name: className,
                students: pendingNames,
                createTime: new Date().toISOString()
            };
            
            const selector = document.getElementById('classSelector');
            selector.add(new Option(className, classId));
            selector.value = classId;
            
            initNames();
            saveData();
            document.getElementById('classActionModal').style.display = 'none';
        });

        document.getElementById('classSelector').addEventListener('change', initNames);
        
        document.getElementById('startBtn').addEventListener('click', () => {
            if(!timer) {
                timer = setInterval(randomHighlight, speed);
            }
        });

        document.getElementById('pauseBtn').addEventListener('click', () => {
            clearInterval(timer);
            timer = null;
            if(currentHighlight) {
                const utterance = new SpeechSynthesisUtterance(currentHighlight.textContent);
                synth.speak(utterance);
            }
        });

        document.getElementById('speed').addEventListener('input', (e) => {
            speed = 200 - e.target.value * 1.9;
            if(timer) {
                clearInterval(timer);
                timer = setInterval(randomHighlight, speed);
            }
        });

        document.getElementById('manageClassBtn').addEventListener('click', () => {
            document.getElementById('classManageModal').style.display = 'block';
        });

        document.getElementById('renameClass').addEventListener('click', function() {
            const currentClass = document.getElementById('classSelector').value;
            const newClassName = prompt('请输入新的班级名称：');
            if (newClassName) {
                students[currentClass].name = newClassName;
                initClassSelector();
                saveData();
            }
            document.getElementById('classManageModal').style.display = 'none';
        });

        document.getElementById('deleteClass').addEventListener('click', function() {
            const currentClass = document.getElementById('classSelector').value;
            if (Object.keys(students).length === 1) {
                alert('至少需要保留一个班级！');
            } else if (confirm(`确定要删除班级 "${students[currentClass].name}" 吗？`)) {
                delete students[currentClass];
                initClassSelector();
                initNames();
                saveData();
            }
            document.getElementById('classManageModal').style.display = 'none';
        });

        window.onclick = function(event) {
            if (['modal', 'class-action-modal'].includes(event.target.className)) {
                event.target.style.display = 'none';
            }
        }

        // 随机高亮函数
        function randomHighlight() {
            if(currentHighlight) {
                currentHighlight.classList.remove('highlight');
            }
            const items = document.getElementsByClassName('name-item');
            if(items.length === 0) return;
            
            const randomIndex = Math.floor(Math.random() * items.length);
            currentHighlight = items[randomIndex];
            currentHighlight.classList.add('highlight');
        }

        // 初始化加载
        window.addEventListener('load', () => {
            const savedData = loadData();
            if (savedData) {
                students = savedData.students;
            } else {
                // 初始化示例数据
                students = {
                    class1698765432100: {
                        name: "示例班级",
                        students: ["张三", "李四"],
                        createTime: new Date().toISOString()
                    }
                };
                saveData();
            }
            initClassSelector();
            initNames();
        });
    </script>
</body>
</html>
